<template>
	<view>
		<v-form :model="form" ref="uForm" id="form-container">
			<u-form-item label="排产编号" :label-width="labelWidth">
				<u-input v-model="form.planNo" disabled />
			</u-form-item>
			<u-form-item label="工段ID" :label-width="labelWidth" v-if="!form.otherprocess">
				<u-input v-model="form.stationId" disabled />
			</u-form-item>
			<u-form-item label="工段编号" :label-width="labelWidth" v-if="!form.otherprocess">
				<u-input v-model="form.sectionNo" disabled />
			</u-form-item>
			<u-form-item label="责任人工号" :label-width="labelWidth" required>	
				<u-input v-model="form.jobNumber" />
			</u-form-item>
			<u-form-item label="设备条码" :label-width="labelWidth">
				<u-input v-model="form.deviceBarcode" disabled />
			</u-form-item>
			<u-form-item label="责任部门" :label-width="labelWidth" v-if="form.otherprocess" required>
				<u-input v-model="form.type" @click="showDepartments = true" placeholder="请选择责任部门" disabled />
				<u-picker mode="selector" v-model="showDepartments"  :default-selector="[defaultIndex]" :range="departments" @confirm="selectDepartment"></u-picker>
			</u-form-item>
			<u-form-item label="责任工序" :label-width="labelWidth" v-if="form.otherprocess" required>
				<u-input v-model="form.upProcess" @click="showpro" :placeholder="form.type?'请选择责任工序':'请先选择责任部门'" :disabled="form.type?false:true" />
				<u-picker mode="selector" v-model="showprocess"  :default-selector="[defaultIdx]" :range="processesList" @confirm="selectProcess"></u-picker>
			</u-form-item>
			<u-form-item label="检验工位ID" label-width="160" v-if="!form.otherprocess">
				<u-input v-model="form.checkStationId" disabled />
			</u-form-item>
			<u-form-item label="问题小类" prop="issueLittle" class="u-flex u-flex-nowrap" :label-width="labelWidthType" required>
				<div class="u-flex u-flex-nowrap u-row-between">
					<u-input v-model="form.issueLittle" />
					<u-button type="success" size="mini" @click="queryIssue('')">查询</u-button>
				</div>
			</u-form-item>
			<u-form-item label="问题大类" :label-width="labelWidth">
				<u-input v-model="form.issueLarge" disabled :placeholder="defaultReminder"/>
			</u-form-item>
			<u-form-item label="问题索引" :label-width="labelWidth">
				<u-input v-model="form.issueIndexes" disabled :placeholder="defaultReminder"/>
			</u-form-item>
			<u-form-item label="责任环节" :label-width="labelWidth">
				<u-input v-model="form.responsibility" disabled :placeholder="defaultReminder"/>
			</u-form-item>
			<u-form-item label="缺陷代码" :label-width="labelWidth">
				<u-input v-model="form.issueId" disabled :placeholder="defaultReminder"/>
			</u-form-item>
			
			<!-- 新增----问题列表 -->
			<view v-for="(item,index) in issueLists" :key="index">
				<u-form-item :label="index+1+')'+' 问题小类'" class="u-flex u-flex-nowrap" :label-width="200">
					<div class="u-flex u-flex-nowrap u-row-between">
						<u-input v-model="item.issueLittle" />
						<u-button type="success" size="mini" @click="queryIssue('issueLists',index)">查询</u-button>
						<u-button class="deleteIssue" type="error" size="mini" @click="deleteIssue(index)">删除</u-button>
					</div>
				</u-form-item>
				<u-form-item label="问题大类" :label-width="labelWidth">
					<u-input v-model="item.issueLarge" disabled :placeholder="defaultReminder"/>
				</u-form-item>
				<u-form-item label="问题索引" :label-width="labelWidth">
					<u-input v-model="item.issueIndexes" disabled :placeholder="defaultReminder"/>
				</u-form-item>
				<u-form-item label="责任环节" :label-width="labelWidth">
					<u-input v-model="item.responsibility" disabled :placeholder="defaultReminder"/>
				</u-form-item>
				<u-form-item label="缺陷代码" :label-width="labelWidth">
					<u-input v-model="item.issueId" disabled :placeholder="defaultReminder"/>
				</u-form-item>
			</view>
			
			<u-form-item label-width="80">
				<u-button type="info" size="mini" @click="addIssue">新增问题</u-button>
			</u-form-item>
			<u-form-item label="质检范围" :label-width="labelWidth">
				<u-radio-group v-model="value">
					<u-radio 
						@change="radioChange" 
						v-for="(item, index) in roleList" :key="index" 
						:name="item.name"
					>
						{{item.name}}
					</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item label="问题性质" prop="natureId" :label-width="labelWidth" required>
				<u-input v-model="form.natureId" type="select" :select-open="showNature" @click="showNature = true"/>
			</u-form-item>
			<u-form-item label="问题描述" :label-width="labelWidth">
				<u-input v-model="form.disqualificationDesc" :type="type" :auto-height="autoHeight" placeholder="请输入不合格描述信息" />
			</u-form-item>
			<u-form-item label="图片上传" :label-width="labelWidth">
				<easy-upload
					:dataList="imageDataList" 
					:uploadUrl="setUploadUrl" 
					:deleteUrl="setDeleteUrl"
					:types="imageTypes"
					@deleteImage = "deleteFaImage"
					:autoUpload="setAutoUpload"
					@successImage="successImage"
					:uploadCount= "imageUpNumber"
				>
				</easy-upload>
			</u-form-item>
			<u-form-item label="视频上传" :label-width="labelWidth">
				<easy-upload
					:dataList="videoDataList" 
					:uploadUrl="setUploadUrl" 
					:deleteUrl="setDeleteUrl"
					@deleteVideo = "deleteFaVideo"
					:autoUpload="setAutoUpload"
					:types="videoTypes"
					@successVideo="successvideo"
				>
				</easy-upload>
			</u-form-item>
			<u-form-item class="u-flex u-row-center">
				<u-button type="success" size="medium" @click="submit">提交</u-button>
			</u-form-item>
		</v-form>
		<u-popup mode="right" v-model="popShow">
			<view class="content">
				<scroll-view scroll-y="true" style="height: 900rpx;width:300rpx">
					<view v-for="(item,index) in issueList" class="buttonGap" :key="index">
						<u-button type="success" size="mini"  @click="selectIssue(item)">{{ item.issueLittle }}——{{ item.issueLarge }}</u-button>
					</view>
				</scroll-view>
			</view>
		</u-popup>
		<u-action-sheet :list="list" v-model="showNature" @click="problemNatureSelect"></u-action-sheet>
		<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>	
<script>
import { addDisqualification,addUpDisqualification, issueIndexes } from '../utils/index.js'
	export default {
		data() {
			return {
				form: {
					planNo: '',					//排产编号
					stationId: '',				//工段ID
					jobNumber: '',				//责任人工号
					deviceBarcode: '',			//条形码
					disqualificationDesc: '',	//描述
					natureId: '',				//问题性质
					imageUrl: '',				//问题图片url
					videoUrl: '',				//问题视频ur
					issueId: '',				//缺陷代码
					issueLarge: '',				//问题大类
					issueIndexes: '',			//问题索引
					responsibility: '',			//责任环节
					issueLittle: '',			//问题小类
					checkStationId: '',			//检验工位ID
					roleScope: ''				//FC/QC/EC问题职责选项
				},
				value: 'QC',					//单选框的默认值
				rules: {						//表单提交前的验证
					issueLittle: [{
							required: true, 
							message: '请输入问题小类', 
							trigger: 'blur',
					}],
					natureId: [{
							required: true,
							message: '请输入问题性质', 
							trigger: 'blur',
					}]
				},
				defaultReminder: '请输入问题小类进行查询',
				popShow: false,			//弹出层的显示控制条件
				labelWidthType: 160,
				issueList: '',			//输入问题小类返回的与问题小类相关的数组数据
				labelWidth: 140,		//表单每一项的宽度
				autoHeight: true,		//表单“描述”输入框自动高度
				showNature: false,		//控制问题性质的显现
				// showType: false,		//控制问题类型的显现
				list: [					//问题性质的选项
					{
					  text: "一般"
					},
					{
					  text: "轻微"
					},
					{
					  text: "严重"
					}
				],
				roleList: [					//	FC/QC/EC选项
					{
						name: 'QC',
						disabled: false
					},
					{
						name: 'FC',
						disabled: false
					},
					{
						name: 'EC',
						disabled: false
					},
					{
						name: '试水检验',
						disabled: false
					}
				],
				departments: ['装配车间','数控车间','焊接','喷涂','物料','供应商'],	//责任部门
				processesList: [],//责任工序
				processes: [
					{ department: '装配车间',array: ['组件','散件','装配','试水']},
					{ department: '数控车间',array: ['下料','编程','数冲','折弯','钳铆','机加']},
					{ department: '焊接',array: ['焊接']},
					{ department: '喷涂',array: ['前处理','刮灰打磨','喷涂保护','喷涂']},
					{ department: '物料',array: ['物流部']},
					{ department: '供应商',array: ['外购','外协','外加']}
				],		//责任工序列表
				showDepartments: false,
				showprocess: false,
				defaultIndex: 0,
				defaultIdx: 0,
				type: 'textarea',		//将描述的输入框设置为textarea
				setUploadUrl: "https://www.golwayhhln.top/hnsMes/fileTransmit/detectionFile",
				setDeleteUrl: "https://www.golwayhhln.top/hnsMes/fileTransmit/delFile",
				imageDataList: [],		//图片上传数据展示
				videoDataList: [],		//视频上传数据展示
				imageTypes: 'image',	//设置上传格式为图片
				videoTypes: 'video',	//设置上传格式为视频
				imageUpNumber: 3,		//设置上传图片最大数量
				setAutoUpload: true,		//设置自动上传图片
				issueLists: [],				//多个问题
				isissueLists: false,
				issueIdex: 0,
				user: uni.getStorageSync('user')
			}
		},
		methods:{
			// 增加可选多个问题
			addIssue(){
				let obj = {
					issueLittle: '',
					issueLarge: '',
					issueIndexes: '',
					responsibility: '',
					issueId: ''
				}
				this.issueLists.push(obj)
			},
			// 删除问题
			deleteIssue(index){
				this.issueLists.splice(index,1)
			},
			// 问题性质选项是数组，传入数组的index值，以此来确定选择了数组的第几项
			problemNatureSelect(index) {
				uni.hideKeyboard();
				this.form.natureId = this.list[index].text
			},
			//单选框选择按钮
			//传入的e值是roleList的name值，直接赋值
			radioChange(e) {
				this.form.roleScope = e
			},
			// 表单验证
			submit() {
				if(this.issueLists.length){
					this.postForm()
					this.issueLists.forEach((item,index)=>{
						if(item.issueLittle){
							this.postForm(item)
						}
					})
				} else{
					this.postForm()
				}
				// this.$refs.uForm.validate(valid => {
				// 	if (valid) {
				// 		console.log('验证通过')
				// 		this.postForm()
				// 	} else {
				// 		this.$refs.uTips.show({
				// 			title: '请完善表单数据!',
				// 			type: 'warning',
				// 			duration: '2000'
				// 		})
				// 	}
				// })
			},
			// 根据roleID来确定QE,QC,FC
			// determineRole() {
			// 	switch(uni.getStorageSync('roleId')) {
			// 		case 3: {
			// 			return 0;
			// 		}
			// 		case 5: {
			// 			return 2;
			// 		}
			// 		case 6: {
			// 			return 1;
			// 		}
			// 	}
			// },
			// 提交整个表单，提交按钮绑定的函数
			async postForm(val) {
				if(this.form.otherprocess){
					// 其他工序
					// 责任部门不能为空
					if(this.form.type == ''){
						return this.$refs.uTips.show({
							title: '请选择责任部门',
							type: 'warning',
							duration: '2000'
						})
					} else if(this.form.upProcess == ''){
						// 责任工序不能为空
						return this.$refs.uTips.show({
							title: '请选择责任工序',
							type: 'warning',
							duration: '2000'
						})
					}
				}
				if(!this.form.jobNumber) return this.$refs.uTips.show({
					title: '责任人工号不能为空！',
					type: 'warning',
					duration: '2000'
				})
				if(!this.form.issueLittle) return this.$refs.uTips.show({
					title: '请选择问题小类！',
					type: 'warning',
					duration: '2000'
				})
				const query = Object.assign({},this.form)
				delete query.roleScope
				delete query.otherprocess
				if(val) {
					query.issueLittle = val.issueLittle,
					query.issueLarge = val.issueLarge,
					query.issueIndexes = val.issueIndexes,
					query.responsibility = val.responsibility,
					query.issueId = val.issueId
				}
				if(this.form.otherprocess){
					// if(this.form.jobNumber != ''){
					// 	query.jobNumber = this.form.jobNumber
					// } else {
					// 	delete query.jobNumber
					// }
					query.type = query.type == '装配车间'?'0':
					query.type == '数控车间'?'1':
					query.type == '焊接'?'2':
					query.type == '喷涂'?'3':
					query.type == '物料'?'4':'5'
				}
				
				// 从Storage获取到角色类型,FC,EC与FC分角色提交表单
				query.disqualificationType =  this.form.roleScope == 'QC' ? '0' : this.form.roleScope == 'FC' ? '1' : this.form.roleScope == 'EC' ? '2':this.form.roleScope == '试水检验'?'3':'0'
				// 问题性质的处理
				query.natureId = query.natureId == '一般' ? '1' : query.natureId == '轻微' ? '2' : '3'
				query.imageUrl = this.imageDataList.join('|')	
				// 对视频的URL进行处理，视频只能上传一个
				query.videoUrl = this.videoDataList.join('|')
				// 发送请求
				const {data} = this.form.otherprocess?await addUpDisqualification(query):await addDisqualification(query)
				let errormsg = data.msg
				if(data.code == 1) {
					this.$refs.uTips.show({
						title: errormsg,
						type: 'success',
						duration: '2000'
					})
					if(this.form.otherprocess){
						this.defaultIdx = 0
						this.defaultIndex = 0
					}
				} else {
					this.$refs.uTips.show({
						title: errormsg,
						type: 'warning',
						duration: '2000'
					})
				}
			},
			showpro(){
				if(this.form.type == '') return this.$refs.uTips.show({
						title: '请先选择责任部门',
						type: 'warning',
						duration: '2000'
					})
				this.processes.forEach((item,index)=>{
					if(item.department == this.form.type){
						this.processesList = item.array
					}
				})
				this.showprocess = true
			},
			selectDepartment(val){
				console.log('责任部门',val[0])
				let index = val[0]
				this.defaultIndex = index
				this.defaultIdx = 0
				this.form.upProcess = ''
				this.form.type = this.departments[index]
			},
			selectProcess(val){
				console.log('责任工序',val[0])
				let index = val[0]
				this.defaultIdx = index
				this.form.upProcess = this.processesList[index]
			},
			// 将问题小类获取的参数填入表单
			selectIssue(value) {
				if(this.isissueLists){
					this.issueLists[this.issueIdex].issueIndexes = value.issueIndexes
					this.issueLists[this.issueIdex].issueLarge = value.issueLarge
					this.issueLists[this.issueIdex].issueId = value.issueId
					this.issueLists[this.issueIdex].responsibility = value.responsibility
					this.issueLists[this.issueIdex].issueLittle = value.issueLittle
					this.isissueLists = false
				} else {
					this.form.issueIndexes = value.issueIndexes
					this.form.issueLarge = value.issueLarge
					this.form.issueId = value.issueId
					this.form.responsibility = value.responsibility
					this.form.issueLittle = value.issueLittle
				}
				
				this.popShow = false
			},
			// 输入问题小类来查找
			async queryIssue(val,index) {
				let issueInds = ''
				if(val){
					issueInds = this.issueLists[index].issueLittle?this.issueLists[index].issueLittle:''
				} else{
					issueInds = this.form.issueLittle?this.form.issueLittle:''
				}
				let query = {
					issueIndexes: issueInds
				}
				query.workCenter = this.user.departmentName == '结构总装车间'?'装配车间':this.user.departmentName
				const { data } = await issueIndexes(query)
				this.issueList = data.data
				this.popShow = true
				if(val){this.isissueLists = true,this.issueIdex = index}
			},
			// 图片上传成功回调函数
			successImage(e){
				// 后台返回的图片存储地址放在consequence中
				let consequence = JSON.parse(e.data)
				if(consequence.code == '1') {
					this.$refs.uTips.show({
						title: '上传成功！',
						type: 'success',
						duration: '2000'
					})
					this.imageDataList.push(consequence.data.results)
					// this.form.imageUrl += consequence.data.results
					// this.form.imageUrl += '|'
				} else {
					this.$refs.uTips.show({
						title: '上传失败！',
						type: 'success',
						duration: '2000'
					})
				}
			},
			// 删除图片接口
			deleteFaImage(data) {
				this.imageDataList.splice(data,1)
			},
			// 删除图片接口
			deleteFaVideo(data) {
				this.videoDataList.splice(data,1)
			},
			// 视频上传成功回调函数
			successvideo(e) {
				let consequence = JSON.parse(e.data)
				if(consequence.code == '1') {
					this.$refs.uTips.show({
						title: '上传成功！',
						type: 'success',
						duration: '2000'
					})
					// this.form.videoUrl = consequence.data.results
					this.videoDataList.push(consequence.data.results)
				} else {
					this.$refs.uTips.show({
						title: '上传失败！',
						type: 'success',
						duration: '2000'
					})
				}
			}
		},
		// 路由跳转传递过来的参数，表单中没有传递数据进去的参数均为undefined
		onLoad(option) {
			this.form = Object.assign({},option)
			this.form.natureId = '严重'
			if(this.form.otherprocess){
				this.form.type = ''
				this.form.upProcess = ''
				this.form.jobNumber = ''
			} else if(this.form.jobNumber == null) {
				this.form.jobNumber = ''
			}
		},
		// onReady() {
		// 	this.$refs.uForm.setRules(this.rules)
		// }
	}	
</script>

<style lang="scss" scoped>
.main-content {
	width: 100%;
}
#form-container ::v-deep .u-form-item {
	margin-top: 15rpx;
	padding: 10rpx 30rpx;
}
.content {
	padding: 24rpx;
	text-align: center;
}
.buttonGap {
	margin-top: 20rpx;
}
.deleteIssue{
	margin-left: 10rpx;
}
</style>
